<template>
  <div>
    <div v-for="(item, index) in article" :key="index">
      <img :src="item.imgSrc" alt="" />
      <p style="font-size:20px;font-weight:600">{{ item.title }}</p>
      <p>{{ item.content }}</p>
      <p>{{ item.detail }}</p>
      <span>作者:{{ item.author }}</span>
      <span>时间：{{ item.date }}</span>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      article: [],
    };
  },
  mounted() {
    console.log(this.$route);
    var { id } = this.$route.params;
    console.log(id);
    this.$http(`http://47.108.197.28:4000/api/articleDetail?id=${id}`).then(
      (res) => {
        console.log(res);
        this.article = res.data.res;
      }
    );
  },
};
</script>

<style scoped>
img {
  width: 10rem;
}
</style>